<template>
  <div class="content">
    <van-button @click="showPicker = true">选择死士牌</van-button>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        title="选择目标和使用牌"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :visible-option-num="8"
      />
    </van-popup>
    <span class="check" @click="showCover = !showCover"
      >点击{{ showCover ? "查看" : "隐藏" }}</span
    >
    <div class="card">
      <div class="info">
        <span> {{ card[2] }} </span>
        <span :style="{ color: card[4] }">{{ card[3] }}</span>
      </div>
      <div class="place">{{ card[1] }}</div>
      <div class="type">{{ card[0] }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
const showPicker = ref<boolean>(false);
const showCover = ref<boolean>(false);
const card = ref<string[]>([]);
const columns = [
  [
    { text: "杀", value: "杀" },
    { text: "闪", value: "闪" },
    { text: "桃", value: "桃" },
    { text: "酒", value: "酒" },
    { text: "装备", value: "装备" },
    { text: "乐不思蜀", value: "乐不思蜀" },
    { text: "兵粮寸断", value: "兵粮寸断" },
    { text: "闪电", value: "闪电" },
    { text: "顺手牵羊", value: "顺手牵羊" },
    { text: "过河拆桥", value: "过河拆桥" },
    { text: "决斗", value: "决斗" },
    { text: "火攻", value: "火攻" },
    { text: "铁索连环", value: "铁索连环" },
    { text: "借刀杀人", value: "借刀杀人" },
    { text: "万箭齐发", value: "万箭齐发" },
    { text: "南蛮入侵", value: "南蛮入侵" },
    { text: "无懈可击", value: "无懈可击" },
    { text: "无中生有", value: "无中生有" },
    { text: "五谷丰登", value: "五谷丰登" },
    { text: "桃园结义", value: "桃园结义" },
  ],
  [
    { text: "一号位", value: "一号位" },
    { text: "二号位", value: "二号位" },
    { text: "三号位", value: "三号位" },
    { text: "四号位", value: "四号位" },
    { text: "五号位", value: "五号位" },
    { text: "六号位", value: "六号位" },
    { text: "七号位", value: "七号位" },
    { text: "八号位", value: "八号位" },
  ],
  [
    { text: "A", value: "A" },
    { text: "2", value: "2" },
    { text: "3", value: "3" },
    { text: "4", value: "4" },
    { text: "5", value: "5" },
    { text: "6", value: "6" },
    { text: "7", value: "7" },
    { text: "8", value: "8" },
    { text: "9", value: "9" },
    { text: "10", value: "10" },
    { text: "J", value: "J" },
    { text: "Q", value: "Q" },
    { text: "K", value: "K" },
  ],
  [
    { text: "方块♦", value: "♦" },
    { text: "黑桃♠", value: "♠" },
    { text: "梅花♣", value: "♣" },
    { text: "红桃♥", value: "♥" },
  ],
];

const onConfirm = (data: any) => {
  showPicker.value = false;
  isConfirm.value = true;
  card.value = data.selectedValues;
  cahce.value = [];
  showCover.value = false;
  switch (card.value[3]) {
    case "♦":
      card.value.push("red");
      break;
    case "♣":
      card.value.push("black");
      break;
    case "♠":
      card.value.push("black");
      break;
    case "♥":
      card.value.push("red");
      break;
  }
};

const cahce = ref<string[]>([]);
const isConfirm = ref<boolean>(false);

watch(showCover, (val) => {
  if (val === true) {
    cahce.value = card.value;
    card.value = [];
  } else if (!isConfirm.value) {
    card.value = cahce.value;
  }
  isConfirm.value = false;
});
</script>

<style scoped lang="scss">
.content {
  height: 60vh;
  overflow: auto;
  .van-button {
    width: 100%;
    border: 2rem solid #999;
    border-radius: 10rem;
  }
  .check {
    display: inline-block;
    border: 2rem solid #999;
    padding: 10rem;
    border-radius: 10rem;
    margin: 10rem 0;
  }
  .card {
    width: 400rem;
    height: 600rem;
    border: 3px solid #000;
    border-radius: 20rem;
    background-color: #e5dcca;
    margin: auto;
    transition: all 0.5s ease-in-out;
    .info {
      height: 100rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      span {
        font-size: 50rem;
        text-align: center;
        margin-left: 20rem;
        &:nth-child(2) {
          font-size: 70rem;
        }
      }
    }
    .place {
      margin: 20rem;
      text-align: center;
      font-weight: bold;
    }
    .type {
      width: 80%;
      padding: 10rem;
      text-align: center;
      font-size: 70rem;
      margin: 100rem auto;
      background-color: #dac48e;
      border: 2px solid #3f3d2f;
    }
  }
}
</style>
